<template>
  <div class="login">
    <div style="position: relative;width:100%;height:50px;">
      <van-nav-bar
        fixed
        title="登录"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <div class="header-from">
      <img class="logo" src="../../assets/logo-bear-F.png" alt="">
      <div class="user-name van-hairline--surround">
        <van-field
          type="number"
          clearable
          left-icon="contact"
          v-model="userName"
          @keyup="phoneKey"
          placeholder="请输入手机号"/>
      </div>
      <div class="Verification-code van-hairline--surround">
        <van-field
          clearable
          left-icon="1"
          v-model="VerificationCode"
          placeholder="请输入图形验证码">
          <van-icon slot="left-icon"  class-prefix="my-icon" name="yanzhengma" />
          <van-button style="border:none" slot="button" size="small" @click="imgCode"><img style="width:60px;height:30px;" :src="Codeimg" alt=""></van-button>
        </van-field>
      </div>
      <div class="SMS van-hairline--surround">
        <van-field
          type="number"
          v-model="sms"
          @keyup="smsKey"
          center
          clearable
          placeholder="请输入短信验证码"
        >
          <van-icon slot="left-icon"  class-prefix="my-icon" name="suo" />
          <van-button v-show="sendAuthCode" style="border:none;color:#6699CC" slot="button" size="small" @click="SendClick" >获取验证码</van-button>
          <van-button v-show="!sendAuthCode" style="border:none;color:#666;font-size:14px;" slot="button" size="small" >{{auth_time}}s 重新获取</van-button>
        </van-field>
      </div>
      <van-button class="login-btn" round size="large" :disabled="!(userName&&VerificationCode&&sms)" @click="onLogin">登 录</van-button>
      <!-- <input type="text" v-model="a"> -->
    </div>
    <div class="footer-agreement">
      登录即表示您已同意<a href="http://h5.daxiongdaikuan.com/#/register">《注册协议》</a>
    </div>
  </div>

</template>

<script>
import { Field, Button, Icon,Toast,NavBar } from 'vant';

export default {
  components:{
    [Field.name]:Field,
    [Button.name]:Button,
    [Icon.name]:Icon,
    [Toast.name]:Toast,
    [NavBar.name]:NavBar,
  },
  data(){
    return{
      userName:'',
      VerificationCode:'',
      sms:'',
      Codeimg:'',//图型验证码
      ticket:'',//识别码
      sendAuthCode:true,
      auth_time: 0, //倒计时 计数器
      latitude:'',
      longitude:'',
      // a:''
    }
  },
  mounted(){
    _hmt.push(['_trackPageview', '/login']);
    this.$util.goBack();

    Toast.loading({duration:1000,mask: false,message: '加载中...'});

    let _this = this;
    //获取坐标
    let userAgentObj = navigator.userAgent;
    if (userAgentObj.match(/Android/i)) {
      window.control.getLocation();//坐标
    } else if (userAgentObj.match(/iPhone/i)) {
      _this.latitude = 132.0;
      _this.longitude = 21
    }

    window.getLocation=(latitude,longitude)=>{
      if(latitude){
        _this.latitude = latitude;
        _this.longitude = longitude;
        // alert(latitude+','+longitude)
      }
      // alert(latitude+','+longitude)
    }

    this.$util.getUser().then(token=>{
       _this.token=token;
      console.log(token)
    })
    this.imgCode();
  },
  methods:{
    onClickLeft(){
      this.$util.url('/homeBefore','首页');
    },
    imgCode(){
      let _this = this;
      this.$api.get('/sys/v1/imgCode',{},s=>{
          Toast.clear();
          _this.Codeimg= s.module.img;
          _this.ticket= s.module.ticket;
        },f=>{
        Toast(f.errorMessage);
      },{
        'Accept': 'application/json',
        'channelCode':this.$util.channelCode,
        'version':this.$util.version,
        'token':'-1'
      })
    },
    phoneKey(){
      console.log(this.userName)
      if(this.userName.length>=11){
        this.userName = this.userName.substring(0,11)
      }
    },
    smsKey(){
      if(this.smsKey.length>=4){
        this.smsKey = this.smsKey.substring(0,4)
      }
    },
    // 发送验证码
    SendClick(){
      let _this = this;
      let pat = /^1\d{10}$/;
      if(!this.userName){
        Toast('请输入手机号');
        return false
      }
      if(!this.VerificationCode){
        Toast('请输入图形验证码');
        return false
      }
      if(!pat.test(this.userName)){
        Toast('请输入有效的手机号码');
        return false
      }
      if(this.userName.substring(0,3)=='147'||this.userName.substring(0,3)=='145'){
        Toast('不支持此号段,请更换其它手机号');
        return false
      }
      Toast.loading({message: '加载中...'});
      this.$api.post('/sys/v1/sendSMSCodeByImgCode?phone='+this.userName+'&imgCode='+this.VerificationCode+'&ticket='+this.ticket,{},s=>{
          Toast.clear();

          _this.sendAuthCode = false;
          _this.auth_time = 60;
          var auth_timetimer =  setInterval(()=>{
              _this.auth_time--;
              if(_this.auth_time<=0){
                  _this.sendAuthCode = true;
                  _this.imgCode()
                  clearInterval(auth_timetimer);
              }
          }, 1000);
        },f=>{
        Toast(f.errorMessage);
      },{
        'Accept': 'application/json',
        'Content-Type': 'application/json',
        'channelCode':this.$util.channelCode,
        'version':this.$util.version,
        'token':this.token
      })
    },
    // 登录
    onLogin(){
      let _this =this;
      // if(!_this.latitude){
      //   let userAgentObj = navigator.userAgent;
      //   if (userAgentObj.match(/Android/i)) {
      //     window.control.getLocation();//坐标
      //   } else if (userAgentObj.match(/iPhone/i)) {

      //   }
      //   return false;
      // }

      Toast.loading({message: '登录中...'});
      let PhoneVleus = this.$util.PhoneVleus;

      // PhoneVleus = {"release":"8.0.0","idfa":"81c050b3842ecfa2","ip":"192.168.2.227","applist":[{"name":"闪传","packageName":"cn.andouya","version":"4.0.0209"},{"name":"360浏览器","packageName":"com.qihoo.browser","version":"8.2.0.132"},{"name":"微信","packageName":"com.tencent.mm","version":"7.0.0"},{"name":"Quik","packageName":"com.stupeflix.replay","version":"4.7.4.3869-7b2372c3e"},{"name":"应用宝","packageName":"com.tencent.android.qqdownloader","version":"7.0.6"},{"name":"亲情关怀","packageName":"com.huawei.remoteassistant","version":"5.0.1.309"},{"name":"优兑商城","packageName":"com.udui.android","version":"1.2.4"},{"name":"高德定位SDK示例","packageName":"com.amap.location.demo","version":"2.0"},{"name":"国酒茅台","packageName":"com.mt99dna.android","version":"2.9"},{"name":"JRebel for Android","packageName":"jra.com.udui.android.check"},{"name":"车精灵FT","packageName":"net.rokyinfo.ft","version":"3.4.5"},{"name":"六个轮子","packageName":"com.xingjia.secarmobi","version":"2.3.1-debug"},{"name":" PP助手","packageName":"com.pp.assistant","version":"5.10.0"},{"name":"百度手机助手","packageName":"com.baidu.appsearch","version":"7.8.1"},{"name":"有道云笔记","packageName":"com.youdao.note","version":"6.6.1"},{"name":"360手机助手","packageName":"com.qihoo.appstore","version":"8.0.2"},{"name":"大熊贷款","packageName":"com.wd.ui","version":"1.0.0"},{"name":"京东","packageName":"com.jingdong.app.mall","version":"7.3.4"},{"name":"JRebel for Android","packageName":"jra.com.udui.android"},{"name":"易骑换电","packageName":"com.example.fullenergy","version":"4.3.1"},{"name":"讯飞输入法","packageName":"com.iflytek.inputmethod","version":"8.1.8270"},{"name":"微博","packageName":"com.sina.weibo","version":"9.1.0"},{"name":"六个轮子运维端","packageName":"com.xingjia.opsmobi","version":"2.0.0"},{"name":"鲁大师评测","packageName":"com.ludashi.benchmark","version":"9.0.4.19.0107"},{"name":"手机淘宝","packageName":"com.taobao.taobao","version":"8.3.10"}],"IMEI":"81c050b3842ecfa2","version":"1.0.0","devicetype":"2","mac":"20:a6:80:ce:19:14","network":"WIFI","width":1080,"model":"EVA-TL00","isroot":false,"sdk":26,"height":1792};
//获取坐标
    let userAgentObj = navigator.userAgent;
    if (userAgentObj.match(/Android/i)) {
      PhoneVleus.latitude = _this.latitude||'';
      PhoneVleus.longitude = _this.longitude||'';
    } else if (userAgentObj.match(/iPhone/i)) {

    }

      PhoneVleus = encodeURIComponent(JSON.stringify(PhoneVleus));
      // _this.a = JSON.stringify(PhoneVleus)
      // alert(JSON.stringify(PhoneVleus))

      //  PhoneVleus ={"sdk":22,"mac":"38:bc:1a:35:01:95","height":1920,"release":"5.1","idfa":"3cd776b614688285","isroot":false,"devicetype":"2","network":"WIFI","IMEI":"3cd776b614688285","version":"1.0.0","ip":"192.168.15.145","width":1080,"applist":[{"name":"计步器","packageName":"com.meizu.net.pedometer","version":"2.6.8"},{"name":"还呗","packageName":"com.shuhekeji","version":"4.1.0"},{"name":"招钱进宝","packageName":"com.example.mposstandard","version":"5.10.1"},{"name":"华为应用市场","packageName":"com.huawei.appmarket","version":"8.0.5.300"},{"name":"派派","packageName":"com.ifreetalk.ftalk","version":"6.5.004"},{"name":"QQ音乐","packageName":"com.tencent.qqmusic","version":"8.9.5.11"},{"name":"扫一扫","packageName":"com.meizu.flyme.scanner","version":"1.1.0413"},{"name":"同花顺","packageName":"com.hexin.plat.android","version":"9.73.15"},{"name":"爱钱进","packageName":"com.iqianjin.client","version":"7.3.6"},{"name":"应用商店","packageName":"com.sec.android.app.samsungapps","version":"4.2.21.2"},{"name":"周末去�http://pre-genl.daxiongdaikuan.com/.exp.exponent","version":"2.8.0"},{"name":"随便贷款","packageName":"com.fourpartner.financial.app","version":"1.0.0"},{"name":"有钱花","packageName":"com.fourpartner.financial","version":"1.0.0"},{"name":"UC浏览器","packageName":"com.UCMobile","version":"12.2.6.1006"},{"name":"爱卡汽车","packageName":"com.xcar.activity","version":"9.2.3"},{"name":"QQ","packageName":"com.tencent.mobileqq","version":"7.9.7"},{"name":"苏宁易购","packageName":"com.suning.mobile.ebuy","version":"7.4.2"},{"name":"喔刷","packageName":"com.scan.woshua","version":"1.4.1"},{"name":"借款钱包","packageName":"com.znsb.app.jkqb","version":"3.3.0"},{"name":"muse","packageName":"com.zhiliaoapp.musically","version":"6.3.0"},{"name":"小米应用商店","packageName":"com.xiaomi.market","version":"R.1.4.5"},{"name":"MOMO陌陌","packageName":"com.immomo.momo","version":"8.13"},{"name":"鑫合富","packageName":"com.shanglianchuangfu.payplatform","version":"1.0.2"},{"name":"百度地图","packageName":"com.baidu.BaiduMap","version":"10.12.0"},{"name":"AliImageEngine","packageName":"com.yunos.imageengineservice","version":"1.3.0"},{"name":"应用商店","packageName":"com.bbk.appstore","version":"7.3.30"},{"name":"橙子视频","packageName":"com.chengzi.mediapack.video","version":"1.1.8"},{"name":"挖财记账","packageName":"com.wacai365","version":"11.43.0"},{"name":"视频解码器","packageName":"com.youku.phone.player.meizu","version":"2.9.4"},{"name":"京粉","packageName":"com.jd.jxj","version":"3.2.2"},{"name":"魅族商城","packageName":"com.flyme.meizu.store","version":"3.3.00"},{"name":"软件商店","packageName":"com.gionee.aora.market","version":"11.20.2000"},{"name":"360手机助手","packageName":"com.qihoo.appstore","version":"5.0.91"},{"name":"大熊贷款","packageName":"com.wd.ui","version":"1.0.0"},{"name":"荔枝闪贷","packageName":"com.sinaif.industloan","version":"1.2.0"},{"name":"和付","packageName":"me.andpay.apos","version":"7.17.9"},{"name":"网易将军令","packageName":"com.netease.mkey","version":"4.9.9 Build 52"},{"name":"京东","packageName":"com.jingdong.app.mall","version":"7.3.4"},{"name":"换机助手","packageName":"com.meizu.datamigration","version":"2.1.23"},{"name":"狼人杀","packageName":"com.c2vl.kgamebox","version":"2.5.4.2"},{"name":"钱客通","packageName":"com.chanjet.chanpay.qianketong","version":"3.3.2"},{"name":"小赢卡贷","packageName":"com.xiaoying.cardloan","version":"3.2.0"},{"name":"建行企业银行","packageName":"com.ccb.companybank","version":"3.0.4"},{"name":"卡盟商城","packageName":"com.qckj.kmsy","version":"2.9.0"},{"name":"会员宝秒到版","packageName":"com.hybunion.miaodao","version":"4.6"},{"name":"支付宝","packageName":"com.eg.android.AlipayGphone","version":"10.1.55.6000"},{"name":"杉德哆啦云","packageName":"com.hf.wuka","version":"1.1.4"},{"name":"Hello mui","packageName":"io.dcloud.HelloMUI","version":"2.6.0"},{"name":"微掌铺","packageName":"com.hkrt.com.kuairutong","version":"2.3.7"}],"model":"MX5","latitude":"4.9E-324","longitude":"4.9E-324"}
      //  PhoneVleus = encodeURIComponent(JSON.stringify(PhoneVleus));
      //  PhoneVleus =  decodeURIComponent(PhoneVleus);
       console.log(PhoneVleus)
      this.$api.post(`/user/v1/loginBySMS?phone=${this.userName}&smsCode=${this.sms}&deviceType=${this.$util.deviceType}&deviceNo=${this.$util.deviceNo}`,{
        // deviceInfo:PhoneVleus
      },s=>{
          Toast.clear();
          let token = s.module.token;
          // let info = JSON.stringify(s.module);
          // console.log(_this.$util);
          // _this.$util.info=info;
          // console.log(_this.$util.info)
          // alert(s.module.loanSchedules[0].state)
          _this.$util.setSaveVlues('token',token)
          if(s.module.loanSchedules[0].state==10){
            // _this.$router.push({ path: '/HomeBefore',query: {info:info }})
            // _this.$router.push({ path: '/HomeBefore'})
            _this.$util.url('/HomeBefore','首页');
          }else if(s.module.loanSchedules[0].state==20){
            // _this.$router.push({ path: '/HomeIn'})
            _this.$util.url('/HomeIn','首页');
          }else if(s.module.loanSchedules[0].state==30){
            // _this.$router.push({ path: '/HomeAfter'})
            _this.$util.url('/HomeAfter','首页');
          }
        },f=>{
          // alert(2)
        Toast(f.errorMessage);
      },{
        'Content-Type':'application/json',
        'channelCode':this.$util.channelCode,
        'version':this.$util.version,
      })
    }
  }
}
</script>
<style>
    .SMS .my-icon-suo{
      font-size: 26px;
      min-width: 1em;
    }
</style>


<style scoped lang="scss">
 /***
  * 产品主题颜色需求
  * #FF8024 按钮 突出文字 ico
  * #FFD500 B辅助色
  * #FFEC9C c辅助色
  * #1D0F00 重要文字
  * #41424E 副标题段落
  * #797A79 次要文字
  * #A9AAA9 不可点击
  * #E6E6E6 分割线 描边
  * #F6F7F6 背景
  * #6699CC 链接
  */
  .login{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width:100%;
    height:100%;
  }
  .header-from{
    padding:0 43px;
    flex:1;
    // border:1px solid red;
    .logo{
      width:66px;
      height:66px;
      margin-top:37px;
    }
    .user-name{
      margin-top:35px;
      .van-field{
        padding-top:12px;
        padding-bottom:12px;
      }

    }
    .user-name[class*=van-hairline]::after,
    .SMS[class*=van-hairline]::after,
    .Verification-code[class*=van-hairline]::after{
      border-radius: 50px;
    }
    .SMS{
      margin-top:20px;
    }
    .Verification-code{
      margin-top:20px;
    }
    .login-btn{
      margin-top:30px;
      background:#FF8024;
      color:#fff;
    }

  }
  .footer-agreement{
    margin-bottom:15px;
    font-size:12px;
    color:#41424E;

  }
  .footer-agreement a{
    font-size:12px;
    color:#6699CC;
  }
</style>